<template>
  <div>
    <transition name="fadeIn">
    <msg :text="text" :msgWay="msgWay" v-if="showMsg"></msg>
      
    </transition>
    <transition name="fadeIn">
    <tip :text="textofTip" v-if="showTip" @config="config" @cancel="cancel"></tip>
      
    </transition>
    <seeAdvice ref="writeAdvice" @addAdviceStatus="addAdviceStatus" @noContent="noContent"></seeAdvice>
    <advice
      v-for="(item,index) in adviceItem"
      :key="item.id"
      :advice="item.content"
      :username="item.realname"
      :id="item.id"
      :time="parseInt(item.time)"
      :realname="item.username"
      @IfDel="IfDel(index)"
      @click.native="showAdviceContent"
    ></advice>
    <div class="msg" :style="[{'transform':'rotate('+deg+')'}]"
     @click="addAdvice" @mouseenter="live2dAboutGetAdvice">
      <div class="O"></div>
      <span>
        点击此处留下你宝贵的建议或者想要留下的话
        <span class="warn">(本站不易请 不要打广告)</span>
      </span>
    </div>
  </div>
</template>

<script>
import msg from "../../components/msg";
import tip from "../../components/tips";
import seeAdvice from "./seeAdvice";
import Bus from "../../bus"
import advice from "../../components/advice";
export default {
  components: {
    advice,
    seeAdvice,
    msg,
    tip,
  },
  created() {
    this.$nextTick(() => {
      document.querySelector(".PCindex").scrollTop = 0;
    });
    this.getAllAdvice();
  },
  data() {
    return {
      adviceItem: [],
      text:"",
      msgWay:"error",
      showMsg:false,
      textofTip:"",
      showTip:false,
      currentDelIndex:0,
      flag:true,
      showAdd:false
    };
  },
  computed: {
    deg() {
      return Math.floor((0.5 - Math.random()) * 40) + "deg";
    },
  },
  methods: {
    live2dAboutGetAdvice(){
      Bus.$emit("live2dAboutGetAdvice")
    },
    noContent(){
      this.msgWay="warn"
        this.text="请填写内容"

        this.showMsg=true
        setTimeout(()=>{
          this.showMsg=false
        },2000)
    },
    addAdviceStatus(msgWay){
      
      if(this.flag){
        this.flag=false
        if(msgWay==="success"){
        this.msgWay="success"
        this.text="添加成功"
          this.$refs.writeAdvice.ifSee=false
        this.$refs.writeAdvice.adviceContent=""
        this.showMsg=true
        setTimeout(()=>{
          this.showMsg=false
        },2000)
        setTimeout(()=>{
          this.flag=true
        },200)
      }else{
        this.text="添加失败"
        this.msgWay="error"
          this.$refs.writeAdvice.ifSee=false

        this.showMsg=true
        setTimeout(()=>{
          this.showMsg=false
        },2000)
        setTimeout(()=>{
          this.flag=true
        },200)
      }
      }
      
    },

    showAdviceContent(){
      this.$refs.writeAdvice.writeAdvice=false
    },
    config(){
      this.$axios.post("/advice/del",{
        id:this.adviceItem[this.currentDelIndex].id,
        username:this.$store.getters.user.username
      }).then(res=>{
        console.log(res);
        
        if(res.data.error===-1){
          this.showTip=false
          this.msgWay="success"
          this.text="删除成功"
          this.$refs.writeAdvice.ifSee=false
          setTimeout(()=>{
        this.showMsg=false
      },2000)
      this.showMsg=true
      this.getAllAdvice()
        }else{
          this.msgWay="error"
          this.text="删除失败"
          this.$refs.writeAdvice.ifSee=false

          setTimeout(()=>{
        this.showMsg=false
      },2000)
      this.showMsg=true
          this.showTip=false

        }
      })
    },
    cancel(){
      this.showTip=false
    },
    IfDel(index){
        this.currentDelIndex=index
      this.showTip=true
      this.textofTip="你确定要删除吗"
    },
    getAllAdvice() {
      this.$axios.get("/advice/search").then((res) => {
        if (res.data.error === -1) {
          this.adviceItem = res.data.data;
          this.showAdd = true
        }else if(res.data.error === 0){
          this.adviceItem = []
        }
      }).catch(err=>{
        Bus.$emit("live2dAboutSendError")
      })
    },
    addAdvice() {
      console.log("asd");

      console.log(this.$refs);
      this.$refs.writeAdvice.color = "rgba(255,255,255,.5)";
      this.$refs.writeAdvice.writeAdvice = true;
      this.$refs.writeAdvice.ifSee = true;
      // this.$axios.post("/advice/add",)
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../css/comment/animate.css");
.msg {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 23px;
  background-color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  padding: 35px 15px;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
  // transform: rotate(15deg);
  box-sizing: border-box;
  vertical-align: top;
  border-radius: 35px;
  span {
    font-family: "advice";
    letter-spacing: 2px;
    font-size: 18px;
    .warn {
      color: red;
    }
  }
}
.msg:hover {
  box-shadow: 5px 5px 5px 3px rgba(0, 0, 0, 0.5);
  transform: scale(1.1) !important;
}
.O {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #fff;
  top: 5px;
  left: 20px;
}
@font-face {
  font-family: "advice";
  src: url("../../assets/font/advice (2).woff");
  src: url("../../assets/font/advice (2).woff") format("woff");
}
</style>